const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const postcssNormalize = require('postcss-normalize');

module.exports = {
    mode: 'development',
    entry: {
        // 'index': path.join(__dirname, './index.js')
        index: path.join(__dirname, './example/index.js')
    },
    output: {
        // path: path.join(__dirname, './lib'),
        path: path.join(__dirname, './target'),
        filename: '[name].js',
        library: '[name]',
        libraryTarget: 'umd',
        chunkFilename: '[name].js'
    },
    resolve: {
        extensions: ['.js', '.jsx'],
        alias: {
            'react-division': path.join(__dirname, './index.js'),
            'lib': path.join(__dirname, './src/components')
        }
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader',
                        options: {
                            presets: [
                                [
                                    '@babel/preset-env',
                                    {
                                        useBuiltIns: 'usage',
                                        corejs: 2
                                    }
                                ],
                                '@babel/preset-react'
                            ],
                            plugins: ['jsx-control-statements']
                        }
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('postcss-flexbugs-fixes'),
                                    require('postcss-preset-env')({
                                        autoprefixer: {
                                            flexbox: 'no-2009'
                                        },
                                        stage: 3
                                    }),
                                    postcssNormalize()
                                ]
                            }
                        }
                    }
                ]
            },
            {
                test: /\.less$/,
                exclude: /node_modules\\@tinper/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader'
                    },
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: {
                                plugins: [
                                    require('postcss-flexbugs-fixes'),
                                    require('postcss-preset-env')({
                                        autoprefixer: {
                                            flexbox: 'no-2009'
                                        },
                                        stage: 3
                                    }),
                                    postcssNormalize()
                                ]
                            }
                        }
                    },
                    {
                        loader: 'less-loader', // compiles Less to CSS
                        options: {
                            lessOptions: {
                                // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
                                modifyVars: {
                                    'border-radius-base': '4px',
                                    'select-border-color': '#d9d9d9',
                                    'select-item-selected-bg': '#fff7e7',
                                    'select-item-selected-color': '#333',
                                    'border-color-base': '#d9d9d9'
                                },
                                javascriptEnabled: true
                            }
                        }
                    }
                ]
            },
            {
                test: /\.(bml|gif|jpg|png)$/,
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024 // 4kb
                    }
                },
                generator: {
                    filename: 'images/[name]_[hash][ext][query]'
                }
            },
            {
                test: /\.(eot|ttf|svg|woff)/,
                type: 'asset/resource',
                generator: {
                    filename: 'font/[name]_[hash][ext][query]'
                }
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin()
    ]
};
